<template>
  <nav>
    <router-link to="/example3-1">3-1</router-link> |
    <router-link to="/example3-2">3-2</router-link> |
    <router-link to="/example3-3">3-3</router-link> |
    <router-link to="/example3-4">3-4</router-link> |
    <router-link to="/example3-5">3-5</router-link> |
    <router-link to="/example3-6">3-6</router-link> |
    <router-link to="/example3-7">3-7</router-link> |
    <router-link to="/example3-8">3-8</router-link> |
    <router-link to="/example3-9">3-9</router-link> |
    <router-link to="/example3-10">3-10</router-link> |
    <router-link to="/example3-11">3-11</router-link> |
    <router-link to="/example3-12">3-12</router-link> |
    <router-link to="/example3-13">3-13</router-link> |
    <router-link to="/example3-14">3-14</router-link> |
    <router-link to="/example3-15">3-15</router-link> |
    <router-link to="/example3-16">3-16</router-link> |
    <router-link to="/example3-17">3-17</router-link> |
    <router-link to="/example3-18">3-18</router-link> |
    <router-link to="/example3-19">3-19</router-link> |
    <router-link to="/example3-20">3-20</router-link> |
    <router-link to="/example3-21">3-21</router-link> |
    <router-link to="/example3-22">3-22</router-link> |
    <router-link to="/example3-23">3-23</router-link> |
    <router-link to="/example3-24">3-24</router-link> |
    <router-link to="/example4-1">4-1</router-link> |
    <router-link to="/zuoye">作业</router-link> |

  </nav>
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
  
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
